<template>
  <div>
    <div class="container">
      <div class="top">
        <div class="nav">
          <div>
            <Logo name="校园二手" />
          </div>
          <div class="route">
            <span @click="handleRouteSelect('/product')">商品</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/myProduct')">我的商品</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/mySave')">我的收藏</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/myView')">足迹</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/NeedAll')">需求市场</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/myNeed')">我的需求</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/tongJi')">校园统计</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/pingLun')">校园论坛</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/leaseMarket')">租赁市场</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/myLease')">我的租赁</span>
            <span v-if="loginStatus" @click="handleRouteSelect('/leaseOrder')">租赁订单</span>
          </div>
        </div>
        <div
          style="cursor: pointer;font-size: 14px;display: flex;justify-content: left;align-items: center;gap: 20px;color: rgb(143, 143, 143);">
          <div class="word-search">
            <div class="item">
              <input type="text" placeholder="搜索商品" v-model="key">
              <i class="el-icon-search" @click="fetch"></i>
            </div>
          </div>
          <div class="styleTop" v-if="loginStatus" @click="handleRouteSelect('/orders')">
            <div style="text-align: center;">
              <i class="el-icon-document"></i>
            </div>
            <div>
              订单
            </div>
          </div>
          <div class="styleTop2" style="text-align: center;" v-if="loginStatus" @click="handleRouteSelect('/message')">
            <div
              style="background-color: #FE2C55; width: 15px;height: 15px;border-radius: 50%; position: absolute;top:15px;right: 355px ">
              <span style="color: #ffffff;padding-top: 1px ">{{ this.messageList.length }}</span>
            </div>
            <div>
              <i class="el-icon-bell"></i>
            </div>
            <div>
              通知
            </div>
          </div>
          <div class="styleTop3" style="text-align: center;" v-if="loginStatus"
            @click="handleRouteSelect('/post-product')">
            <div>
              <i class="el-icon-plus"></i>
            </div>
            <div>
              发布商品
            </div>
          </div>
          <div class="styleTop3" style="text-align: center;" v-if="loginStatus" @click="handleRouteSelect('/needAdd')">
            <div>
              <i class="el-icon-folder-add"></i>
            </div>
            <div>
              发布需求
            </div>
          </div>
          <div v-if="!loginStatus" @click="loginOperation">
            登录&nbsp;|&nbsp;注册
          </div>
          <div v-if="loginStatus">
            <img @click="handleRouteSelect('/myself')" class="avatar" :src="userInfo.userAvatar">
          </div>
          <div v-if="loginStatus" style="width: 60px">
            <span @click="handleRouteSelect('/myself')" class="nameStyle">{{ userInfo.userName }}</span>
          </div>
        </div>
      </div>


    </div>
    <div style="padding: 10px 150px;">
      <router-view></router-view>
    </div>
    <div v-if="loginStatus && this.userInfo.address == null">
      <el-dialog title="提示" :visible.sync="centerDialogVisible" width="50%" height="40px" center>
        <span style="font-size: 30px;">个人信息不完整</span>
        <span slot="footer" class="dialog-footer">

          <el-button type="primary" @click="handleRouteSelect2('/myself')">前去完善</el-button>
        </span>
      </el-dialog>
    </div>

  </div>
</template>
<script>
import Logo from "@/components/Logo";
import { getToken, setSearchKey, setUserInfo } from "@/utils/storage";
export default {
  name: "Home",
  components: {
    Logo,
  },
  data() {
    return {


      key: null,
      dialogOperaion: false,
      loginStatus: false, // 默认未登录
      userInfo: {},
      searchPath: '/search',
      productInfoList: [],
      messageList: [],
      centerDialogVisible: true
    };
  },
  created() {
    this.loadLoginStatus();
    this.handleRouteSelect('/product')
  },
  methods: {
    queryProductInfo() {
      this.$axios.post(`/product/queryProductInfo`, {}).then(res => {
        const { data } = res;
        if (data.code === 200) {
          this.productInfoList = data.data;
        }
        this.loginStatus = data.code === 200;
      }).catch(error => {
        console.log("商品指标查询异常：", error);
      });
    },
    numIn() {
      const messageQueryDto = {
        userId: this.userInfo.id,
        isRead: false// 1代表的是收藏行为
      };
      this.$axios.post(`/message/query`, messageQueryDto).then(res => {
        const { data } = res;
        if (data.code === 200) {
          this.messageList = data.data;
        }
      }).catch(error => {
        console.log("信息查询异常：", error);
      });

    },
    // 跳转登录页
    loginOperation() {
      this.$router.push('/login');
    },
    // 搜索
    fetch() {
      setSearchKey(this.key);
      this.handleRouteSelect(this.searchPath);
    },
    // 路由切换
    handleRouteSelect(path) {
      if (this.$router.currentRoute.fullPath !== path) {
        this.$router.push(path);
        this.numIn()
      }
    },
    handleRouteSelect2(path) {
      if (this.$router.currentRoute.fullPath !== path) {
        this.$router.push(path);
        this.centerDialogVisible = false
      }
    },
    //判断用户是否已经登录
    loadLoginStatus() {
      const token = getToken();
      // 没登录
      if (token === null) {
        this.loginStatus = false;
        return;
      }
      this.auth();
    },
    // token检验
    auth() {
      this.$axios.get(`/user/auth`).then(res => {
        const { data } = res;
        if (data.code === 200) {
          // 存储用户信息
          setUserInfo(data.data);
          this.userInfo = data.data;
          this.queryProductInfo();
          this.numIn()
        }
        this.loginStatus = data.code === 200;
      }).catch(error => {
        console.log("token检验异常：", error);
      });
    },
  }
};
</script>
<style scoped lang="scss">
.avatar {
  border: 3px solid rgb(51, 51, 51);
  height: 30px;
  width: 30px;
  border-radius: 50%;


}

.avatar:hover {
  border: 3px solid rgb(4, 68, 227);
}

.word-search {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 450px;

  .item {
    max-width: 1000px;
    background-color: rgb(244, 244, 244);
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid rgb(5, 5, 5);
    height: 35px;

    input:focus {
      width: 650px;
    }

    input {
      border: none;
      transition: all 0.6s;
      width: 600px;
      margin: 0 0 0 10px;
      background-color: rgb(244, 244, 244);
      outline: none;
      font-size: 14px;
    }

    i {
      padding: 6px 12px;
      border-radius: 5px;
      cursor: pointer;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      background-color: rgb(244, 244, 244);
    }

    i:hover {
      background-color: rgb(241, 241, 241);
    }
  }

}

.container {
  background-color: #FFE60F;
}



.top {

  height: 80px;
  padding: 0 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .nav {
    padding: 20px 0;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 20px;

    .route {
      display: flex;
      justify-content: left;
      align-items: center;
      gap: 30px;
      position: absolute;
      top: 50px;
      left: 380px;


      span {
        font-size: 14px;
        color: #575555;
        cursor: pointer;
      }

      span:hover {
        color: rgb(0, 0, 0);
      }
    }

  }

  .nameStyle {
    color: #605e5e;
  }

  .nameStyle:hover {
    color: #1E80FF;

  }

  .styleTop {
    color: #605e5e;
  }

  .styleTop:hover {
    color: #1c1c1c;
  }

  .styleTop2 {
    color: #605e5e;
  }

  .styleTop2:hover {
    color: #1c1c1c;
  }

  .styleTop3 {
    color: #605e5e;
  }

  .styleTop3:hover {
    color: #1c1c1c;
  }
}
</style>